// 测试专用页面，不是组件，不要引用

import React, { useEffect, useState, useMemo } from 'react'
import { getMap } from '../common/map'
import { getFeatures /*, hide, show */ } from '../common'
import { UploadOutlined } from '@ant-design/icons'
import { Button, message, Upload } from 'antd'
import '../assets/css/common.css'
import LayersTree from '../components/LayersTree'
import FormDialog from '../components/FormDialog'
import { useDialog } from '../common/hooks/useDialog'
import { useData } from '../common/formData'
import { useImageModal } from '../store/hooks/useImageModal'
const Test = () => {
  const [map, setMap] = useState()
  const [treeData, setTreeData] = useState()
  useEffect(() => {
    setMap(getMap(false))
    getFeatures((data) => {
      setTreeData(data)
    })
  }, [])
  // const toggleShow = (showKeys, hidenKeys) => {
  //   show(map.getLayers().getArray()[1], showKeys.join(','));
  //   hide(map.getLayers().getArray()[1], hidenKeys.join(','));
  // };
  const [visible, showDialog, closeDialog] = useDialog()
  const submit = (data) => {
    console.log(data)
  }
  const { state, show, hide, setUrl } = useImageModal()
  const [formData, setData] = useData({ callback })
  return (
    <div>
      <button
        onClick={() => {
          showDialog()
        }}
      >
        show
      </button>
      <FormDialog
        visible={visible}
        cancel={closeDialog}
        submit={submit}
        formData={formData}
      />
      <div id="map">
        111
        <LayersTree treeData={treeData} /* toggle={toggleShow} */ />
      </div>
    </div>
  )
}

export default Test
